<template>
	<view class="container">
		<view class="bgc">
			<view class="img">
				<image src="/static/img/detail/Battery.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="money">
			<text class="cycle"></text>
			<text class="pay" v-if="order.is_pay == '0'">应付</text>
			<text class="pay" v-if="order.is_pay == '1'">实付</text>
			<text class="num">￥<text>{{order.pay_money}}</text></text>
		</view>

		<view class="list">
			<view class="list_item">
				<image src="/static/img/detail/user.png" mode="widthFix"></image>
				<text>{{nickName}}</text>
			</view>
			<view class="list_item" v-if="order.is_pay == '1'">
				<image src="/static/img/money/reCharge.png" mode="widthFix"></image>
				<text>付款时间：<text>{{order.pay_time_date}}</text></text>
			</view>
			<view class="list_item">
				<image src="/static/img/detail/play.png" mode="widthFix"></image>
				<text>开始时间：<text>{{order.start_time_date}}</text></text>
			</view>
			<view class="list_item">
				<image src="/static/img/detail/time.png" mode="widthFix"></image>
				<text>结束时间：<text>{{order.end_time_date}}</text></text>
			</view>
			<view class="list_item">
				<image src="/static/img/detail/duration.png" mode="widthFix"></image>
				<text>使用时长：<text>{{order.use_time}}</text></text>
			</view>
		</view>

		<!-- <view class="btn" v-if="order.is_pay == '0' && order.is_end == '1'">
			<button type="primary" @click="toggleSpec">去支付</button>
		</view>
		<view class="btn" v-if="order.is_pay == '0' && order.is_end == '0'">
			<button type="primary" @click="back">去归还</button>
		</view> -->


		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec(2)">
			<view class="mask"></view>
			<view class="layer" @click.stop="stopPrevent">
				<image src="../../static/img/index/close.png" mode="widthFix" @click="toggleSpec()"></image>
				<view class="tit">
					支付
				</view>
				<view class="payment">
					￥ <text>{{order.pay_money}}</text>
				</view>
				<view class="cost">
					<text>查看费用明细</text>
					<image src="/static/img/detail/right.png" mode="widthFix"></image>
				</view>
				<view class="payment_method">
					<view class="yue" :class="{'active':isActive==3}" @click="checked(3)">
						<image v-if="isActive == 3" src="/static/img/detail/yue-select.png" mode="widthFix"></image>
						<image v-if="isActive == 0" src="/static/img/detail/yue.png" mode="widthFix"></image>
						<text>余额支付</text>
					</view>
					<view class="weixin" :class="{'active':isActive==0}" @click="checked(0)">
						<!-- #ifdef MP-WEIXIN -->
						<image v-if="isActive == 0" src="/static/img/detail/weixin-select.png" mode="widthFix"></image>
						<image v-if="isActive == 3" src="/static/img/detail/weixin.png" mode="widthFix"></image>
						<text>微信支付</text>
						<!-- #endif -->
						<!-- #ifdef MP-ALIPAY -->
						<image v-if="isActive == 0" src="/static/img/detail/apily-select.png" mode="widthFix"></image>
						<image v-if="isActive == 3" src="/static/img/detail/apily.png" mode="widthFix"></image>
						<text>支付宝支付</text>
						<!-- #endif -->
					</view>
				</view>
				<view class="pay_money">
					<button @click="toggleSpec(2)">确认支付 {{order.pay_money}}元</button>
				</view>
			</view>
		</view>

		<view class="mask" v-if="tackout">
			<view class="pay">
				<image src="/static/img/index/close.png" mode="widthFix" @click="close"></image>
				<view class="tit">
					温馨提示
				</view>
				<view class="con">
					确定归还电池么？
				</view>
				<view class="btn">
					<button type="default" class="exit" @click="close">取消</button>
					<button type="default" class="sub" @click="takein">归还</button>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import {
		unpaidOrder,
		backBattery,
		pay
	} from '../../api/api.js'
	export default {
		data() {
			return {
				list: [],
				specClass: 'none',
				nickName: '',
				order: {},
				tackout: false,
				order_sn: '',
				isActive: 3
			}
		},
		onLoad(options) {
			console.log(options)
			this.order_sn = options.order_sn
			this.getOrder()
		},
		onShow() {
			this.getOrder()
		},
		methods: {
			getOrder() {
				unpaidOrder({
					order_sn: this.order_sn
				}).then(res => {
					console.log(res)
					this.nickName = res.data.nickname
					this.order = res.data.order
				})
			},
			toggleSpec(num) {
				if (num == 2) {
					pay({
						pay_type: this.isActive,
						order_sn: this.order_sn
					}).then(res => {
						if (res.data.is_pay == 0) {
							uni.requestPayment({
								provider: 'wxpay',
								timeStamp: res.data.params.timeStamp,
								nonceStr: res.data.params.nonceStr,
								package: res.data.params.package,
								signType: res.data.params.signType,
								paySign: res.data.params.paySign,
								success: function(res) {
									console.log('success:' + JSON.stringify(res));
									uni.navigateTo({
										url: '/pages/common/success'
									})
								},
								fail: function(err) {
									console.log('fail:' + JSON.stringify(err));
									uni.navigateTo({
										url: '/pages/common/fail'
									})
								}
							});
						}else if(res.data.is_pay == 1){
							uni.showToast({
								icon:'none',
								title:'支付成功'
							})
							let that = this
							setTimeout(function(){
								console.log(11111)
								that.getOrder()
							},500)
						}

					})

					if (this.specClass === 'show') {
						this.specClass = 'hide';
						setTimeout(() => {
							this.specClass = 'none';
						}, 250);
					} else if (this.specClass === 'none') {
						this.specClass = 'show';
					}
				} else {
					// this.getCarList()
					if (this.specClass === 'show') {
						this.specClass = 'hide';
						setTimeout(() => {
							this.specClass = 'none';
						}, 250);
					} else if (this.specClass === 'none') {
						this.specClass = 'show';
					}
					// console.log(this.cartList)
				}
			},
			back() {
				this.tackout = true
			},
			takein() {
				backBattery().then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.showToast({
							icon: 'none',
							title: '归还成功'
						})
						this.tackout = false
						this.getOrder()
					}

				})
			},
			close() {
				this.tackout = false
			},
			checked(type) {
				this.isActive = type
			},
			stopPrevent() {}
		},
	}
</script>

<style scoped lang="scss">
	.container {
		width: 100%;
		height: 100%;

		/*  弹出层 */
		.popup {
			position: fixed;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;

			&.show {
				display: block;

				.mask {
					animation: showPopup 0.2s linear both;
				}

				.layer {
					animation: showLayer 0.2s linear both;
				}
			}

			&.hide {
				.mask {
					animation: hidePopup 0.2s linear both;
				}

				.layer {
					animation: hideLayer 0.2s linear both;
				}
			}

			&.none {
				display: none;
			}

			.mask {
				position: fixed;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1;
				background-color: rgba(0, 0, 0, 0.4);
			}

			.layer {
				position: fixed;
				z-index: 1;
				bottom: 0;
				width: 100%;
				height: 600upx;
				background-color: #fff;
				// padding: 0 30upx;

				>image {
					position: absolute;
					top: 30upx;
					left: 30upx;
					width: 30upx;
					height: 30upx;
				}

				.tit {
					width: 100%;
					text-align: center;
					margin-top: 50upx;
					font-size: 36upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #191919;
				}

				.payment {
					width: 100%;
					font-size: 40upx;
					text-align: center;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FF6565;
					margin: 10upx 0;

					text {
						font-size: 60upx;
					}
				}

				.cost {
					width: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					
					text{
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						margin-right: 15upx;
					}
					
					image {
						width: 15upx;
						// margin: 0upx 15upx;
					}
				}

				.payment_method {
					width: 100%;
					height: 100upx;
					display: flex;
					justify-content: space-around;
					align-items: center;
					margin-top: 30upx;

					.yue,
					.weixin {
						width: 220upx;
						height: 90upx;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 2px solid #E4E4E4;
						border-radius: 20px;
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;

						image {
							width: 30upx;
							height: 30upx;
							// margin: 0 30upx 0 20upx;
							margin-right: 10upx;
						}

					}

					.active {
						color: #333;
						border: 2px solid #3EB9FF;
					}

				}

				.pay_money {
					width: 90%;
					height: 80upx;
					border-radius: 40upx;
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					overflow: hidden;
					margin: 50upx auto 0;

					button {
						width: 100%;
						height: 80upx;
						line-height: 80upx;
						color: #FFFFFF;
						background: #3EB9FF;
					}
				}

			}

			@keyframes showPopup {
				0% {
					opacity: 0;
				}

				100% {
					opacity: 1;
				}
			}

			@keyframes hidePopup {
				0% {
					opacity: 1;
				}

				100% {
					opacity: 0;
				}
			}

			@keyframes showLayer {
				0% {
					transform: translateY(120%);
				}

				100% {
					transform: translateY(0%);
				}
			}

			@keyframes hideLayer {
				0% {
					transform: translateY(0);
				}

				100% {
					transform: translateY(120%);
				}
			}
		}




		.bgc {
			width: 100%;
			height: 400upx;
			background-color: #3eb9ff;
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 180upx;
				height: 180upx;
				border-radius: 50%;
				background-color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 80upx;
				}
			}
		}

		.money {
			width: 500upx;
			height: 100upx;
			background-color: #fff;
			box-shadow: 0 10upx 10upx #C0C0C0;
			border-radius: 50upx;
			position: absolute;
			top: 350upx;
			left: 125upx;
			display: flex;
			align-items: center;

			.cycle {
				width: 15upx;
				height: 15upx;
				background-color: #41b8ff;
				display: inline-block;
				border-radius: 50%;
				margin: 0 10upx 0 100upx;
			}

			.pay {
				margin: 0 100upx 0 10upx;
			}

			.num {
				color: #f49a9b;

				text {
					margin-left: 10upx;
				}
			}

		}

		.list {
			width: 100%;
			height: 400upx;
			margin-top: 100upx;

			.list_item {
				height: 100upx;
				padding: 0 10%;
				display: flex;
				align-items: center;

				image {
					width: 30upx;
					margin-right: 30upx;
				}

				text {
					text {
						color: #b7b4b7;
					}
				}
			}

		}

		.btn {
			width: 90%;
			height: 90upx;
			margin: 100upx auto;
			color: #FFFFFF;
			border-radius: 45upx;
			overflow: hidden;

			button {
				width: 100%;
				height: 100%;
				background-color: #41b8ff;
			}
		}

		.mask {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			z-index: 99;
			background: rgba($color: #000000, $alpha: 0.3);
			display: flex;
			align-items: center;
			justify-content: center;

			.pay {
				width: 580upx;
				height: 340upx;
				padding: 10upx 30upx;
				background: #FFFFFF;
				border-radius: 12px;
				position: relative;

				image {
					width: 30upx;
					height: 30upx;
					position: absolute;
					top: 20upx;
					left: 30upx;
				}

				.tit {
					width: 100%;
					text-align: center;
					margin: 50upx auto 30upx;
				}

				.con {
					width: 100%;
					text-align: center;
				}

				.btn {
					margin-top: 45upx;
					display: flex;

					button {
						width: 200upx;
						height: 88upx;
						background: #FFFFFF;
						border-radius: 44upx;
						border: 1upx solid #f2f2f2;
						color: #666666;
					}

					.sub {
						width: 200upx;
						height: 88upx;
						background: #3EB9FF;
						border-radius: 44upx;
						color: #FFFFFF;
					}

				}
			}
		}


	}
</style>
